<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h4{
            margin-top: 0px;
            display: inline-block;
        }
    </style>
</head>
<body>
<h1>密码强度实时验证</h1>
<input type="text" onblur="run1(this.value)">
<span id="f1"></span>
</body>
<script>
    function run1(val) {
        if (val.length<6){
            alert("您输入的密码长度小于6，不符合要求！")
        } else{
            if (val.length < 10) {
                document.getElementById("f1").innerHTML="<font color='#E93106'><h4>弱</h4></font>";
            }else if (val.length >= 10 && val.length < 15) {
                document.getElementById("f1").innerHTML="<font color='#FF8400'><h4>中</h4></font>";
            }else if (val.length >= 15) {
                document.getElementById("f1").innerHTML="<font color='#1D8719'><h4>强</h4></font>";
            }
        }
    }
</script>
</html>